<template>
  <el-row class="RangeDrawer">
    <resizeDrawer
      title="座席明细"
      :drawer="drawer"
      :size="800"
      :isShowMoreBtn="false"
      @closeDraw="closeDraw"
      :append-to-body="true"
    >
      <template slot="column">
        <div class="range-area">
          <configTable
            ref="table"
            :headers="tableHeaders"
            :data="tableData"
            :pagingData="pagingData"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
            @checkHeadersChange="checkHeadersChange"
          >
            <template slot="column">
              <template v-for="(item, index) in checkHeaders">
                <u-table-column
                  v-if="item.show && item.prop !== 'oprate'"
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                  :sortable="item.sortable"
                  :min-width="item.width || 80"
                >
                <template slot-scope="scope">
                  <span v-if="item.prop.includes('count')">{{ scope.row[item.prop] || 0 }}</span>
                  <span v-else-if="item.prop.includes('time')">{{ scope.row[item.prop] || '00:00:00' }}</span>
                  <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
                </u-table-column>
              </template>
            </template>
          </configTable>
        </div>
      </template>
    </resizeDrawer>
  </el-row>
</template>

<script lang="ts">
/**
 * 在线座席日志-座席状态详情-查看drawer
 */
import { Component, Vue, Watch } from 'vue-property-decorator';
import resizeDrawer from '@/components/globalTool/resizeDrawer/drawer.vue';
import configTable from '@/components/globalTool/resizeTable/index.vue'
import { commonAction } from '@/utils/common';
import { CommonModule } from '@/store/modules/common'
import { getTime, getOperatStatus } from './index'
@Component({
  name: 'RangeDrawer',
  components: {
    resizeDrawer,
    configTable
  }
})
export default class RangeDrawer extends Vue {
  private drawer: boolean = false
  private tableData: any = []
  private pagingData: any = { total: 0, limit: 10, page: 1 }
  private checkHeaders: [] = []
  // 记录父级页面传递数据
  private data: any = {}

  private async openDraw (data: any) {
    this.data = data
    this.getData()
    this.drawer = true;
  }

  private closeDraw () {
    this.tableData = []
    this.pagingData.page = 1
    this.pagingData.total = 0
    this.drawer = false;
  }

  @Watch('$route')
  public close () {
    this.closeDraw()
  }

  // 获取数据
  private async getData () {
    const actionData: any = {
      limit: this.pagingData.limit,
      page: this.pagingData.page,
      agentId: this.data.userId,
      loginId: this.data._id
    }
    const data: any = await commonAction({ url: '/im-center/action/userLog/imUserLog/agentDetailInfo', method: 'POST', data: actionData })
    if (data.success) {
      this.tableData = data.data.list.map(v => {
        const object: any = { ...v }
        object.name = getOperatStatus(v)
        object.timeLength = getTime(v.timeLength)
        return object
      })
      this.pagingData.total = data.data.count
    }
  }

  private tableHeaders: object[] = [
    { label: '状态', prop: 'name' },
    { label: '开始时间', prop: 'beginTime', width: 150 },
    { label: '结束时间', prop: 'endTime', width: 150 },
    { label: '状态时长', prop: 'timeLength' },
    { label: '修改前上限', prop: 'sessionUpperLimit' },
    { label: '修改后上限', prop: 'originalUpperLimit' }
  ]

  private checkHeadersChange (checkList) {
    this.$set(this, 'checkHeaders', checkList)
  }

  private handleSizeChange (size: number) {
    this.pagingData.limit = size
    this.getData()
  }

  private handleCurrentChange (page: number) {
    this.pagingData.page = page
    this.getData()
  }
}
</script>

<style lang="stylus" scoped>
.range-area
  position absolute
  height calc(100% - 80px)
  width calc(100% - 48px)
  top 60px
</style>
